import React, { useState } from 'react';
import { Button, Checkbox } from 'antd';
import { CloseOutlined } from '@ant-design/icons';

type DataItem = {
  id: string;
  label: string;
  text: string;
};

const DataDisplay: React.FC<{ data: DataItem[] }> = ({ data }) => {
  const [list, setList] = useState<DataItem[]>(data);
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [groups, setGroups] = useState<string[]>([]);

  const handleTagClick = (tag: string) => {
    setSelectedTags(prev => {
      if (prev.includes(tag)) {
        return prev.filter(t => t !== tag);
      } else {
        return [...prev, tag];
      }
    });
  };

  const handleSaveSelected = () => {
    const newGroup = `Group${groups.length + 1}`;
    setGroups(prev => [...prev, newGroup]);
    setSelectedTags([]);
  };

  const handleCancelSelected = () => {
    setSelectedTags([]);
  };

  const handleGroupClick = (group: string) => {
    setGroups(prev => prev.filter(g => g !== group));
    setList((prev: DataItem[]) => [...prev, ...groups.filter(g => g !== group)]);
  };

  return (
    <div>
      {list.map((item) => (
        <Checkbox key={item.id} onChange={() => handleTagClick(item.label)} style={{ color: selectedTags.includes(item.label) ? 'red' : undefined }}>
          {item.label}
        </Checkbox>
      ))}
      <Button onClick={handleSaveSelected} disabled={selectedTags.length === 0}>
        保存选中
      </Button>
      <Button onClick={handleCancelSelected} disabled={selectedTags.length === 0}>
        取消选中
      </Button>
      {groups.map((group) => (
        <div key={group} onClick={() => handleGroupClick(group)}>
          {group}
          <CloseOutlined onClick={() => handleGroupClick(group)} />
        </div>
      ))}
    </div>
  );
};

export default DataDisplay;